<template>
  <div>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @input="getContent"></ckeditor>
  </div>
</template>

<script>
import Editor from "ckeditor5-lvjiajia-zsdl-v2/build/ckeditor";
import ret from "mammoth/mammoth.browser";
import { baseUpload } from '@/api/task/task';

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // ckeditor配置开始 -------------------------------------------------
      editor: Editor,
      editorData: '',
      editorConfig: {
        placeholder: "输入正文",
        // 编辑器的配置
        toolbar: {
          items: [
            "undo",
            "redo",
            "|",
            "heading",
            "|",
            "bold",
            "fontFamily", // 字体样式
            "fontSize", // 字体大小
            {
              label: '列表',
              icon:
                '<svg t="1678948802831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1010" width="200" height="200"><path d="M132.608 204.288m-66.56 0a66.56 66.56 0 1 0 133.12 0 66.56 66.56 0 1 0-133.12 0Z" p-id="1011"></path><path d="M962.01728 158.80192l-680.68352 0.3584-0.04096 84.44928 680.7552-0.3584-0.03072-84.44928z" p-id="1012"></path><path d="M132.608 512m-66.56 0a66.56 66.56 0 1 0 133.12 0 66.56 66.56 0 1 0-133.12 0Z" p-id="1013"></path><path d="M281.33376 466.87232l-0.04096 84.44928 680.7552-0.3584-0.03072-84.44928-680.68352 0.3584z" p-id="1014"></path><path d="M132.608 819.712m-66.56 0a66.56 66.56 0 1 0 133.12 0 66.56 66.56 0 1 0-133.12 0Z" p-id="1015"></path><path d="M281.33376 775.59808l-0.04096 84.44928 680.7552-0.3584-0.03072-84.44928-680.68352 0.3584z" p-id="1016"></path></svg>',
              items: ['bulletedList', 'numberedList']
            },
            "bulletedList",
            "numberedList",
            "horizontalLine",
            "blockQuote",
            "alignment",
            "todoList",
            "findAndReplace",
            {
              label: "更多",
              icon: false,
              items: [
                "italic",
                "strikethrough",
                "underline",
                "superscript",
                "subscript",
                "indent",
                "outdent",
                // 'code',
                "codeBlock",
                "removeFormat",
              ],
            },
            "|",
            "fontBackgroundColor",
            "fontColor",
            "highlight",
            "|",
            "imageUpload",
            // 'mediaEmbed',
            "link",
            "specialCharacters",
            "insertTable",
            "|",
            "htmlEmbed",
            "sourceEditing",
            "pageBreak", // 分页符

            // More of toolbar's config.
            // ...
          ],
          shouldNotGroupWhenFull: true,
        },
        // 标题的配置
        heading: {
          options: [
            {
              model: "paragraph",
              title: "正文",
              class: "ck-heading_paragraph",
            },
            {
              model: "heading1",
              view: "h1",
              title: "H1 大标题",
              class: "ck-heading_heading1",
            },
            {
              model: "heading2",
              view: "h2",
              title: "H2 中标题",
              class: "ck-heading_heading2",
            },
            {
              model: "heading3",
              view: "h3",
              title: "H3 小标题",
              class: "ck-heading_heading3",
            },
          ],
        },
        // 缩进的配置
        indentBlock: {
          offset: 2,
          unit: "em",
        },
        // html映射
        htmlEmbed: {
          showPreviews: true,
        },
        // 启用所有HTML功能
        htmlSupport: {
          allow: [
            {
              name: /.*/,
              attributes: true,
              classes: true,
              styles: true,
            },
          ],
        },
        // 图像
        image: {
          toolbar: ["toggleImageCaption", "|", "imageStyle:aligncenter"],
        },
      },
    };
  },
  created() {
    this.editorData = this.value;
    this.baseToHttp();
  },
  watch: {
    value: {
      handler(nv, ov) {
        if (nv) {
          this.editorData = nv;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getContent() {
      this.baseToHttp();
      this.$emit('getContent', this.editorData);
      // console.log(this.editorData, 'this.editorData编辑器');
    },
    baseToHttp() {
      const imgList = this.baseImg(this.editorData);//富文本内所有图片数组
      for (let i = 0; i < imgList.length; i++) {
        if (imgList[i].includes('http://')) {
          continue
        }
        if (imgList[i].includes('file:///')) {
          continue
        }
        baseUpload({ base64Image: imgList[i] }).then(res => {
          if (200 === res.code) {
            this.editorData = this.editorData.replace(imgList[i], res.url);
          }
        });
      }
      // console.log(this.editorData, '6666666666666666');
    },
    baseImg(content) {
      let imgReg = /<img.*?(?:>|\/>)/gi //匹配图片中的img标签
      let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
      if (content) {
        let arr = content.match(imgReg)  //筛选出所有的img
        let srcArr = []
        for (let i = 0; i < arr?.length; i++) {
          let src = arr[i].match(srcReg)
          // 获取图片地址
          if (src) {
            srcArr.push(src[1])
          }
        }
        return srcArr;
      } else {
        return [];
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .ck.ck-editor__main>.ck-editor__editable {
  min-height: 200px !important;
}
</style>

